<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<h4>按钮</h4>
<div class="button-items">
	<button type="button" class="btn btn-primary waves-effect waves-light">Primary</button>

	<button type="button" class="btn btn-secondary waves-effect">Secondary</button>

	<button type="button" class="btn btn-success waves-effect waves-light">Success</button>

	<button type="button" class="btn btn-info waves-effect waves-light">Info</button>

	<button type="button" class="btn btn-warning waves-effect waves-light">Warning</button>

	<button type="button" class="btn btn-danger waves-effect waves-light">Danger</button>

	<button type="button" class="btn btn-light waves-effect">Light</button>

	<button type="button" class="btn btn-dark waves-effect waves-light">Dark</button>

	<button type="button" class="btn btn-link waves-effect">Link</button>
</div>
<br>
<div class="button-items">
	<button type="button"
		class="btn btn-outline-primary waves-effect waves-light">Primary</button>
	<button type="button" class="btn btn-outline-secondary waves-effect">Secondary</button>
	<button type="button"
		class="btn btn-outline-success waves-effect waves-light">Success</button>
	<button type="button"
		class="btn btn-outline-info waves-effect waves-light">Info</button>
	<button type="button"
		class="btn btn-outline-warning waves-effect waves-light">Warning</button>
	<button type="button"
		class="btn btn-outline-danger waves-effect waves-light">Danger</button>
	<button type="button"
		class="btn btn-outline-dark waves-effect waves-light">Dark</button>
	<button type="button" class="btn btn-outline-light waves-effect">Light</button>
</div>
<br>
<div class="">
	<div class="btn-group m-b-10">
		<button type="button" class="btn btn-primary dropdown-toggle"
			data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item"
				href="#">Another action</a> <a class="dropdown-item" href="#">Something
				else here</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</div>
	<!-- /btn-group -->
	<div class="btn-group m-b-10">
		<button type="button" class="btn btn-secondary dropdown-toggle"
			data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item"
				href="#">Another action</a> <a class="dropdown-item" href="#">Something
				else here</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</div>
	<!-- /btn-group -->
	<div class="btn-group m-b-10">
		<button type="button" class="btn btn-success dropdown-toggle"
			data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item"
				href="#">Another action</a> <a class="dropdown-item" href="#">Something
				else here</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</div>
	<!-- /btn-group -->
	<div class="btn-group m-b-10">
		<button type="button" class="btn btn-info dropdown-toggle"
			data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item"
				href="#">Another action</a> <a class="dropdown-item" href="#">Something
				else here</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</div>
	<!-- /btn-group -->
	<div class="btn-group m-b-10">
		<button type="button" class="btn btn-warning dropdown-toggle"
			data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item"
				href="#">Another action</a> <a class="dropdown-item" href="#">Something
				else here</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</div>
	<!-- /btn-group -->
	<div class="btn-group m-b-10">
		<button type="button" class="btn btn-danger dropdown-toggle"
			data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item"
				href="#">Another action</a> <a class="dropdown-item" href="#">Something
				else here</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</div>
	<!-- /btn-group -->
</div>
<h4>图片框</h4>
<div class="">
	<img class="img-thumbnail" alt="200x200"
		style="width: 200px; height: 200px;"
		src="static/images/small/img-3.jpg" data-holder-rendered="true">
	<img class="rounded mr-2" alt="200x200" style="width: 200px;"
		src="static/images/small/img-4.jpg" data-holder-rendered="true">
	<img class="rounded-circle" alt="200x200"
		src="static/images/users/avatar-4.jpg" data-holder-rendered="true">
</div>
<h4>进度条</h4>
<div class="">
	<div class="progress m-b-30">
		<div class="progress-bar" role="progressbar" style="width: 25%"
			aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
	</div>
	<div class="progress m-b-30">
		<div class="progress-bar" role="progressbar" style="width: 50%"
			aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
	</div>
	<div class="progress m-b-30">
		<div class="progress-bar" role="progressbar" style="width: 75%"
			aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">百分之七十五</div>
	</div>
	<div class="progress">
		<div class="progress-bar" role="progressbar" style="width: 100%"
			aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">百分之百</div>
	</div>
</div>
<h4>文本输入插件</h4>

<form method="post">
	<textarea id="elm1" name="area">杜玫瑰，就是好~</textarea>
</form>

<!--文档插件 js-->
<script src="static/plugins/tinymce/tinymce.min.js"></script>


<script>
	$(document)
			.ready(
					function() {
						if ($("#elm1").length > 0) {
							tinymce
									.init({
										selector : "textarea#elm1",
										theme : "modern",
										height : 300,
										plugins : [
												"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
												"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
												"save table contextmenu directionality emoticons template paste textcolor" ],
										toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
										style_formats : [ {
											title : 'Bold text',
											inline : 'b'
										}, {
											title : 'Red text',
											inline : 'span',
											styles : {
												color : '#ff0000'
											}
										}, {
											title : 'Red header',
											block : 'h1',
											styles : {
												color : '#ff0000'
											}
										}, {
											title : 'Example 1',
											inline : 'span',
											classes : 'example1'
										}, {
											title : 'Example 2',
											inline : 'span',
											classes : 'example2'
										}, {
											title : 'Table styles'
										}, {
											title : 'Table row 1',
											selector : 'tr',
											classes : 'tablerow1'
										} ]
									});
						}
					});
</script>
